<template>
  <div id="myLineChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { get5yearsSituation } from '@/api/buildHouse.js';
const data = ref([])
const xAxisData = ref([])
const yAxisData2 = ref([]) //加固
function getData() {
  get5yearsSituation().then((res) => {
      data.value = res.data
      xAxisData.value = res.data.map(item=>item.years)
      yAxisData2.value = res.data.map(item=>item.reinforceProjectNum)
      renderChart()
  });
}

let myChart = null;
const renderChart = () =>{
  if (!myChart) {
		myChart = echarts.init(document.getElementById('myLineChart'));
	}
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '2%',
      right: '7%',
      bottom: '4%',
      containLabel: true
    },
    // 标注
    legend: {
      data: [],
      top: 20,
      right: 6,
      icon: "square",
      itemHeight: 6, 
      itemWidth: 8,
      textStyle: {
        color: "#fff",
      },
    },
    toolbox: {},
    // x轴
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData.value,
      // x轴样式
      axisLine: {
        lineStyle: {
          color: '#30374A',
          show: false,
        }
      },
      //x轴文字的配置
      axisLabel: {
        textStyle: {
          color:' #fff',
        },
      },
      margin: 9,
      name:'年',
      nameTextStyle:{
        color:'#fff'
      },
      // algin:'right',
    },
    // y轴
    yAxis:{
      type:'value',
      min: 0,
      // max: 20,
      // y轴样式
      axisLine: {
        show: false,
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color:'rgba(255,255,255,0.5)',
        },
      },
      // 背景线条
      splitLine: {
        lineStyle: {
          color: 'rgba(71,90,219,0.5)',
          type: 'dashed'
        }
      },
      name:'栋数            ',
      nameTextStyle:{
        color:'#fff',
      },
    },
    series: [
      {
        name: "",
        type: "line",
        stack: '总量',
        data: yAxisData2.value,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1, 
          [
            {
              offset: 0,
              color: 'rgba(255, 179, 91, 1)'
            },
            {
              offset: 1,
              color: 'rgba(255, 179, 91, 0.4)'
            }
          ])
        },
        symbol: 'circle', //折线点设置为实心点
        symbolSize: 6, //折线点的大小
        itemStyle : { 
            normal : { 
                color:'#FFB35B', //改变折线点的颜色
                lineStyle:{ 
                    color:'#FFB35B', //改变折线颜色
                    width:1,//改变粗细  
                } 
            } 
        },
      },
    ],
    // 刻度线
    axisTick: {
        show: false,
        length: 0,
        lineStyle: {
            color:'transparent',
            type: 'solid',
            width: 1
        },
        alignWithLabel: false 
    },
  };
  // 渲染
	option && myChart.setOption(option);
}
onMounted(() => {
  getData()
})

</script>
<style lang='scss' scoped>
#myLineChart{
  width: 430px;
  height: 250px;
  margin: -20px auto 0;
  font-size: 14px;
}
</style>